<template>
    <span ref="katexElement" v-html="renderedHtml"></span>
  </template>
  
  <script>
  import katex from 'katex';
  
  export default {
    props: {
      expression: {
        type: String,
        required: true
      },
      displayMode: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        renderedHtml: ''
      };
    },
    watch: {
      expression: {
        handler(newExpression) {
          this.renderKatex(newExpression);
        },
        immediate: true
      }
    },
    methods: {
      renderKatex(expression) {
        try {
          this.renderedHtml = katex.renderToString(expression, {
            throwOnError: false,
            displayMode: this.displayMode
          });
        } catch (error) {
          console.error('Error rendering KaTeX:', error);
          this.renderedHtml = `<span class="katex-error">Error rendering expression: ${expression}</span>`;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .katex-error {
    color: red;
  }
  </style>